import { useEffect, useState } from 'react';
import { Link, PageModelState, useDispatch, useSelector } from 'umi';
import { Table, Button, Form, Input, Select, Popconfirm, Breadcrumb } from 'antd';
import styles from './index.less';
import classNames from 'classnames';
import { IpageItem } from '@/types';
import CommentFoot from '@/components/commonFooter'
export default function Page() {
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '路径',
      dataIndex: 'path',
      key: 'path',
    },
    {
      title: '顺序',
      dataIndex: 'order',
      key: 'order',
    },
    {
      title: '阅读量',
      render: (value: string) => {
        return <span className={styles.page_views}>{value}</span>;
      },
      dataIndex: 'views',
      key: 'views',
    },
    {
      title: '状态',
      render: (value: string) => {
        return (
          <span>
            <span
              className={classNames(
                value == '已发布' ? styles.page_release : styles.page_draft,
                styles.page_dot,
              )}
            ></span>
            <span className={styles.page_status}>{value}</span>
          </span>
        );
      },
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '发布时间',
      dataIndex: 'publishAt',
      key: 'publishAt',
    },
    {
      title: '操作',
      key: 'operation',
      dataIndex: 'operation',
      render: (value: string, values: IpageItem) => {
        return (
          <div>
            <Link to={`/page/editor/${values.id}`}>
              <Button type="text" style={{ color: '#0188fb' }}>
                <span>编辑</span>
              </Button>
            </Link>
            <Button
              type="text"
              style={{ color: '#0188fb' }}
              onClick={() => {
                onPublish(values);
              }}
            >
              <span>{values.status == '已发布' ? '下线' : '发布'}</span>
            </Button>
            <Button type="text" style={{ color: '#0188fb' }}>
              <span>查看访问</span>
            </Button>
            <Popconfirm
              title="Sure to delete?"
              onConfirm={() => {
                setId(values.id);
                dispatch({
                  type: 'page/getPageDEle',
                  payload: id,
                });
              }}
            >
              <Button type="text" style={{ color: '#0188fb' }}>
                <span>删除</span>
              </Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  const { pageDate, pageLength, pageId } = useSelector(
    (state: { page: PageModelState }) => state.page,
  );
  const dispatch = useDispatch();
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [name, setName] = useState('');
  const [path, setPath] = useState('');
  const [status, setStus] = useState('');
  const [operation, setOperation] = useState(false);
  const [id, setId] = useState('');
  const [statusId, setStatusId] = useState('');
  const onPublish = (values: any) => {
    setId(values.id);
    if (values.status == '已发布') {
      setStatusId('draft');
    } else {
      setStatusId('publish');
    }
    dispatch({
      type: 'page/getPagepublish',
      payload: {
        id,
        statusId,
      },
    });
  };
  const onSelectChange = (e: any) => {
    console.log(e);
    setSelectedRowKeys(e);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  useEffect(() => {
    dispatch({
      type: 'page/getPage',
      payload: {
        page,
        pageSize,
        name,
        path,
        status,
        operation,
      },
    });
  }, [page, pageSize, name, path, status, operation, pageId]);
  const onFinish = (values: any) => {
    if (values.name) {
      setName(values.name);
    } else {
      setName('');
    }
    if (values.path) {
      setPath(values.path);
    } else {
      setPath('');
    }
    if (values.status) {
      setStus(values.status);
    } else {
      setStus('');
    }
  };
  const [form] = Form.useForm();
  const onReset = () => {
    form.resetFields();
  };
  const onRefresh = () => {
    setOperation(!operation);
  };
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <div className={styles.page}>
      {/* 头部面包屑 */}
      <div className={styles.page_head}>
        <Breadcrumb >
          <Breadcrumb.Item>
            <a href="/">工作台</a>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <a href="">页面管理</a>
          </Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className={styles.page_body}>
        <div>
          {/* 页面管理搜索框 */}
          <Form
            form={form}
            name="control-hooks"
            onFinish={onFinish}
            className={styles.page_form}
          >
            <div className={styles.page_screen}>
              <Form.Item
                name="name"
                label="名称"
                className={styles.page_from_item}
              >
                <Input placeholder="请输入页面名称" />
              </Form.Item>
              <Form.Item
                name="path"
                label="路径"
                className={styles.page_from_item}
              >
                <Input placeholder="请输入页面路径" />
              </Form.Item>
              <Form.Item
                label="状态"
                name="status"
                className={styles.page_from_item}
              >
                <Select>
                  <Select.Option value="publish">已发布</Select.Option>
                  <Select.Option value="draft">草稿</Select.Option>
                </Select>
              </Form.Item>
            </div>
            <div className={styles.page_operation}>
              <Button
                type="primary"
                htmlType="submit"
                className={styles.page_button_search}
              >
                搜索
              </Button>
              <Button
                htmlType="button"
                onClick={onReset}
                className={styles.page_button_reset}
              >
                重置
              </Button>
            </div>
          </Form>
          {/* 页面管理渲染 */}
          <div className={styles.page_table}>
            <div className={styles.page_table_header}>
              <div>
                {hasSelected ? (
                  <div>
                    <Button
                      htmlType="button"
                      className={styles.page_table_button}
                      onClick={() => {
                        selectedRowKeys.map((item) => {
                          setId(item);
                          setStatusId('publish');
                          dispatch({
                            type: 'page/getPagepublish',
                            payload: { id, statusId },
                          });
                        });
                      }}
                    >
                      发布
                    </Button>
                    <Button
                      htmlType="button"
                      className={styles.page_table_button}
                      onClick={() => {
                        selectedRowKeys.map((item) => {
                          setId(item);
                          setStatusId('draft');
                          dispatch({
                            type: 'page/getPagepublish',
                            payload: { id, statusId },
                          });
                        });
                      }}
                    >
                      下线
                    </Button>
                    <Button
                      htmlType="button"
                      className={classNames(
                        styles.page_table_button,
                        styles.page_table_delete,
                      )}
                      onClick={() => {
                        selectedRowKeys.map((item) => {
                          setId(item);
                          dispatch({ type: 'page/getPageDEle', payload: id });
                        });
                      }}
                    >
                      删除
                    </Button>
                  </div>
                ) : (
                  ''
                )}
              </div>
              <div>
                <Link to="/page/editor">
                  <Button type="primary">
                    <span>
                      <svg
                        viewBox="64 64 896 896"
                        focusable="false"
                        data-icon="plus"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                      >
                        <defs>
                          <style></style>
                        </defs>
                        <path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
                        <path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path>
                      </svg>
                    </span>
                    <span>新建</span>
                  </Button>
                </Link>
                <span className={styles.page_refresh} onClick={onRefresh}>
                  <svg
                    viewBox="64 64 896 896"
                    focusable="false"
                    data-icon="reload"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                  >
                    <path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"></path>
                  </svg>
                </span>
              </div>
            </div>
            <Table
              rowSelection={rowSelection}
              columns={columns}
              dataSource={pageDate}
              pagination={{
                showSizeChanger: true,
                pageSizeOptions: ['8', '12', '24', '36'],
                pageSize: pageSize,
                onChange: function (page, pageSize) {
                  setPageSize(pageSize);
                  setPage(page);
                },
                showTotal: function () {
                  return `共${pageLength}条`;
                },
              }}
            />
          </div>
        </div>
        <CommentFoot />
      </div>
    </div>
  );
}
